<template>
  <div>
    <el-row>
      <el-button type="primary" @click="BackFruitList">返回</el-button>
    </el-row>
    <div ref="myChart" :style="{width: '800px', height: '600px'}" class="mychartClass"></div>
  </div>
</template>

<script>
export default {
  name: 'FruitBar',
  data () {
    return {
      barvos: {}
    }
  },
  mounted () {
    this.getBarVos()
  },
  methods: {
    async getBarVos () {
      const { data: res } = await this.axios.get('/fruit/fruitbar')
      console.log(res)
      if (res) {
        const myBarChart = this.$echarts.init(this.$refs.myChart)
        // 绘制图表
        myBarChart.setOption({
          title: {
            text: '水果销量统计',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#555555'
            }
          },
          tooltip: {},
          xAxis: {
            data: res.names
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: res.barSeries
          }]
        })
      }
    },
    BackFruitList () {
      this.$router.push('/fruitlist')
    }
  }
}
</script>

<style  scoped>
.mychartClass{
  text-align: center;
  margin: 0 auto;
}
</style>
